<template>
  <div>
    <div id="timelineEcharts" style="height: 240px"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import { formatDateTime } from '@/utils/FormatDataH'
export default {
    data () {
        return {
            newD: [],
          chart:null
        }
    },
    props: {
        timelineData: Array
    },
  mounted(){
    this.$nextTick(() => {
      this.initEcharts()
    })
  },
    methods: {
        initEcharts (data) {
          this.chart = echarts.init(document.getElementById('timelineEcharts'))
          let option = {
            axisPointer: {
              link: {xAxisIndex: 'all'}
            },
            dataZoom: [
              {
                realtime: true,
              }
            ],
            xAxis : [
              {
                type : 'category',
                boundaryGap : false,
                show:false,
                data: this.timelineData,
              }
            ],
            yAxis : [],
            series : []
          }
          this.chart.setOption(option,true)
          this.chart.on('dataZoom',(params) => {
            var opt = this.chart.getOption();
            var batch  = opt.dataZoom[0];
            var start = batch.startValue == undefined ? startTime : opt.xAxis[0].data[batch.startValue];
            var end = batch.endValue == undefined ? endTime : opt.xAxis[0].data[batch.endValue];
            var startDate = new Date(start).getTime();
            var endDate = new Date(end).getTime();
            let timeline = {
              startDate:startDate,
              endDate:endDate
            }
            this.$emit('time-line',timeline)
          })
        },
    },
  watch:{
    timelineData(val){
      this.$nextTick(() => {
        for (let i = 0; i < val.length; i++) {
          let current = val[i];
          current = formatDateTime(current)
          this.timelineData[i] = current
        }
        this.initEcharts()
      })
    }
  }
}
</script>
<style scoped>
</style>
